import React, { Component } from 'react';
import loadable from '../util/loadable';
import {BrowserRouter as Router, Route,Switch } from 'react-router-dom'
/**公共路由最好不要按需引入 */
import Admin from '../components/admin/AdminHome'
import AuthRoute from './AuthRoute'
/**按需加载组件 */
const Homepage = loadable(() => import('../components/user/Homepage'))
const Register =loadable(()=>import('../components/user/Register'))
const Login =loadable(()=>import('../components/user/Login'))
const Product = loadable(() => import('../components/user/product/Product'))
const ProIndex = loadable(() => import('../components/user/product/ProIndex'))
const NavMenu = loadable(() => import('../components/user/reproduction/NavMenu'))
const NlpRepro = loadable(() => import('../components/user/reproduction/NlpRepro'))
const GeneralView = loadable(() => import('../components/user/personal/GeneralView'))
const NoFound = loadable(() => import('../components/404/NoFound'))
const AccountInfo = loadable(() => import('../components/user/personal/AccountInfo'))
const Goods = loadable(() => import('../components/user/personal/Goods'))
const News = loadable(()=>import('../components/user/news/News'))


class Routes extends Component{
    render(){
        return(
            <Router>
                <div className={{width:'100%',height:'100%'}}>
                <Switch>
                
                    <Route path='/' exact component = {Homepage}/>
                    <Route path='/register' exact component={Register} />
                    <Route path='/login' exact component={Login} />
                    <Route path='/personal/' render = { () =>
                            <Switch>
                                <Route path = '/personal/' exact component = {GeneralView}/>
                                <Route path = '/personal/account' exact component = {AccountInfo}/>
                                <Route path = '/personal/goods' exact component = {Goods}/>
                            </Switch>
                    }
                    />

                    <Route path='/product/' render = { () =>
                            <Switch>
                                <Route path='/product' exact component = {ProIndex}/>
                                <Route path='/product/document' exact component = {Product}/>
                            </Switch>
                    }
                    />


                    <Route path='/reproduction/' render = {() =>
                        <NavMenu>
                            <Switch>
                                <Route path='/reproduction/nlp' exact  component = {NlpRepro}/>
                            </Switch>
                        </NavMenu>
                    }
                    />

                    <AuthRoute path="/admin" component={Admin} />
                    <Router>
                            <Route path='/news/:id' exact component = {News}/>
                    </Router>

                  
                    <Route component={NoFound} path="*" />
            </Switch>
            </div>
            </Router>

        )
    }
}

export default Routes;